{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues %}

{% block css %}
    <style>
        .order-id {
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            display: block;
        }

        .order-body {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">筛选</h3>
            </div>
            <div class="panel-body">

                <form>
                    <p>工单类型</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            维护保养
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            维修
                        </label>
                    </div>
                    <p>工单状态</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            新建
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            执行
                        </label>
                    </div>
                    <p>创建人员</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            天下第一
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            天下第二
                        </label>
                    </div>
                    <p>执行人员</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            倒数第一
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="">
                            倒数第二
                        </label>
                    </div>
                </form>




            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <i class="fa fa-list">
                    <span>工单列表</span>
                </i>
            </div>
            <div class="panel-body">
                {% if is_issue_home_page %}
                    <a class="btn btn-primary" data-toggle="modal" data-target="#addWorkOrderModal">
                        <i class="fa fa-plus-circle">
                            <span>新建工单</span>
                        </i>
                    </a>
                {% else %}
                    <a class="btn btn-primary" href="{% url 'issues' project_id=request.login_user.project.id %}">
                        <i class="fa fa-home">
                            <span>工单首页</span>
                        </i>
                    </a>
                {% endif %}
                <a class="btn btn-success" href="{% url 'issues_myself' project_id=request.login_user.project.id %}">
                    <i class="fa fa-user-o">
                        <span>我的待办</span>
                    </i>
                </a>
                <a class="btn btn-info" href="{% url 'issues_all' project_id=request.login_user.project.id %}">
                    <i class="fa fa-list-alt">
                        <span>所有工单</span>
                    </i>
                </a>
            </div>

            <!-- Table -->
            {% block workOrderTable %}
            {% endblock %}
        </div>
        {% block page_info_html %}{% endblock %}
    </div>


    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="addWorkOrderModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">创建工单</h3>
                    </div>
                    <div class="panel-body">
                        <form id="addWorkOrderForm">
                            {% csrf_token %}
                            {% for field in form %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <div class="error-msg"></div>
                                </div>
                            {% endfor %}
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                        <button type="button" class="btn btn-primary" id="addWorkOrderBtn">创 建</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script>
        var ADDORDERURL = '{% url 'issues' project_id=request.login_user.project.id %}'
        $(function () {
            addWorkOrder();
        })

        /*
        * 创建新工单
        * */
        function addWorkOrder() {
            $('#addWorkOrderBtn').click(function () {
                $('.error-msg').empty()
                $.ajax({
                    url: ADDORDERURL,
                    type: 'POST',
                    data: $('#addWorkOrderForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href
                        } else {
                            console.log(res);
                            $.each(res.error, function (k, v) {
                                $('#id_' + k).next().text(v[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>

{% endblock %}


{% block js2 %}

{% endblock %}